<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
*{ padding: 0; margin: 0; border: 0; list-style: none;}
body{ background: #000;}
.all{ width: 600px; height: 200px; border: 1px solid red; margin:100px auto; overflow: hidden; }
.all ul{ width:999999px; position:relative; left:0; top:0;}
.all li{ float:left; width:300px; height: 200px;}
</style>

<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){	

	var newtag1 =  $('.all ul li:first').clone();
	var newtag2 =  $('.all ul li:last').clone();

	$('.all ul').append(newtag1);
	$('.all ul').append(newtag2);
	//网页加载完成执行，不停在的走，没有目标。
		//定时器（循环定时） setInterval(function(){},时间);
	var timer = null;//定时器的名称
	var num  = 0; //累加器
	function gogo(){	
		timer = setInterval(function(){	
			num++;//累加器生效，即让其加加
			if(num>1200){	
				num=0;
			}
			$('.all ul').css({left:-num})
		},10)
	};

	gogo();

	//事件中执行
	$('.all li').hover(function(e) {
		clearInterval(timer);		
        $(this).siblings().stop().fadeTo(300,0.3)//凸出显示
    },function(){
		gogo();

		$('.all li').stop().fadeTo(300,1);
	});

})
</script>
</head>
<body>
<div class="all">
	<ul>
		<li><img src="images/fengtu/01.jpg" width="300" height="200" alt=""/></li>
		<li><img src="images/fengtu/02.jpg" width="300" height="200" alt=""/></li>
		<li><img src="images/fengtu/03.jpg" width="300" height="200" alt=""/></li>
		<li><img src="images/fengtu/04.jpg" width="300" height="200" alt=""/></li>
	</ul>
</div>
</body>
</html>
